import React from 'react';
import { inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {Icon,Tabs} from 'antd';
import { WeaNewScroll,WeaBrowser,WeaOrgTree,WeaTools,WeaLocaleProvider,WeaTab } from 'ecCom';
import { getCurrentHeight} from '../../util/Util';
const toJS = mobx.toJS;
const TabPane = Tabs.TabPane;
const getLabel = WeaLocaleProvider.getLabel;
//此组件可传属性：onClick方法，className-样式  minusHeight-滚动条需要减去的高度  isSearch-是否有搜索框
@observer
export default class PersonTree extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        userRoot:undefined,//人员组织tree结构
        hrmId:undefined,//人员组织当前的人员id
        hrmName:WeaTools.ls.getJSONObj('theme-account') && WeaTools.ls.getJSONObj('theme-account').username || undefined,//人员组织当前的人员name
        _height:getCurrentHeight(),
        selectedKey:1,
        topTab:[
          // {
          // title: getLabel(442,"下属"),
          // viewcondition: "0"
          // },
          {
            title: getLabel(376,"组织"),
            viewcondition: "1"
          }]
      }
      this._userid = "";
    }
    componentWillMount() {//一些初始化请求
      let params = {};
      this._userid = this.props.hrmId || '';
    }
    //回调函数 hrmId 人员id,hrmName 人员名字
    doCallBack(hrmId,hrmName){
      if (typeof this.props.onPersonClick === 'function') {
        this.props.onPersonClick(hrmId,hrmName);
      }else{
        console.log("当前点击:"+hrmId+"=="+hrmName);
      }
    }
    chooseUser=(e)=> {
      let hrmId = '', hrmName = undefined;
      if (e.selected) {
          hrmId = e.node.props.id;
          hrmName = e.node.props.name;
      }
      if (hrmId) {
        this.setState({
          hrmId:hrmId,
          hrmName:hrmName,
        });
        this.doCallBack(hrmId,hrmName);
      }
    }
    changeUserRoot=(ids,names,datas)=> {
      this.setState({
        userRoot:datas,
        hrmId:ids,
        hrmName:names,
      });
      this.doCallBack(ids,names);
    }
    resetUserRoot=()=> {
      this.setState({
        userRoot:undefined,
        hrmId:undefined,
        hrmName:WeaTools.ls.getJSONObj('theme-account') && WeaTools.ls.getJSONObj('theme-account').username || undefined,
      });
      this.doCallBack();
    }
    renderLeft() {
      let {userRoot,_height} = this.state;
      let minusHeight = this.props.minusHeight || 0 ;
      let {isSearch} = this.props;
      userRoot = toJS(userRoot);
      let org = <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@26elmp`} dataUrl="/api/hrm/base/getHrmResourceTree" rootKey="rootManager"
                    treeNodeClick={this.chooseUser}
                    params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {rootid:this._userid}}
                />
      return <div style={{height: window.innerHeight-minusHeight}}>
        <div className="left-body">
          {isSearch && <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@gvj24y`} isSingle={true}
            linkUrl="/hrm/resource/HrmResource.jsp?id=" title={getLabel(179,"人力资源")} type="1" viewAttr="2"
            replaceDatas={userRoot}
            customIcon="icon-coms-Reset"
            addOnClick={this.resetUserRoot}
            onChange={this.changeUserRoot}
          />}
          <div>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@jqmxxz`} height={_height-120-minusHeight}>
               {org}
            </WeaNewScroll>
          </div>
        </div>
      </div>
    }
    getOrgTreeConfig = () => {
      return {
          isLoadUser: true,
          treeNodeClick: this.props.treeNodeClick
      }
    }
    renderLeftSub(){
      let minusHeight = this.props.minusHeight || 0 ;
      return <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@pnd6l9`} height={this.state._height-120-minusHeight}>
          <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@ozxzkx`} {...this.getOrgTreeConfig()} />
      </WeaNewScroll>
    }
    onTabsChange(v){
      this.setState({ selectedKey: v });
    }
    render() {
      const{topTab,selectedKey} = this.state;
      return (
        <div style={{background:"#ffffff"}}>
          <div className ={this.props.className}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@acbtsv`}
              datas={topTab}
              keyParam="viewcondition" //主键
              selectedKey={selectedKey}
              onChange={v => this.onTabsChange(v)}
          />
          {selectedKey==0 && this.renderLeft()}
          {selectedKey==1 && this.renderLeftSub()}
          {/* <Tabs defaultActiveKey="0" >
            <TabPane tab={getLabel(442,"下属")} key="0">
                {this.renderLeft()}
            </TabPane>
            <TabPane tab={getLabel(376,"组织")} key="1">
                {this.renderLeftSub()}
            </TabPane>
          </Tabs> */}
          </div>
        </div>
    )
  }
};